<template>
  <div class="mater-box w-card">
    <div class="head-box">
      <div class="title-box">
        <div class="title">海报列表</div>
      </div>
    </div>
    <div class="content-box">
      <div class="content-tree">
        <div class="search-box">
          <el-input v-model="searchValue" placeholder="搜索分组名称">
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
        </div>
        <div class="tree-content">
          <el-link type="primary" @click="addFenzuHandle">+ 添加分组</el-link>
        </div>
        <div class="my-tree" :style="{'height':tableHeight2 + 'px'}">
          <el-tree ref="treeRef" :data="treeData" node-key="id" :default-expanded-keys="defaultExpandedKeys"
            :highlight-current="true" :filter-node-method="filterNode" @node-click="handleNodeClick">
            <template #default="{ node, data }">
              <div class="flcen">
                <span>{{ data.typeName }}</span>
                <el-dropdown @command="(e) => { handleCommand(e,data) }">
                  <span class="el-dropdown-link">
                    <el-icon size="16">
                      <MoreFilled />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="1">管理分组</el-dropdown-item>
                      <!-- <el-dropdown-item command="2">新建子分组</el-dropdown-item> -->
                      <el-dropdown-item command="3">删除分组</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="table-box">
        <div class="table-title">
          <img src="@/assets/icons/wenjianjia.png" alt="">
          {{ chooseName }}
          <el-button style="margin-left:auto;" type="primary" @click="uploadFile">上传海报</el-button>
        </div>
        <el-table :height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
          :cell-style="{fontSize:'14px',color:'#7b7b7d'}" :data="sucaiList" stripe @selection-change="handleSelectionChange">
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column type="index" width="55" label="序号" align="center" />
          <el-table-column prop="bannerUrl" label="缩略图" align="center">
            <template v-slot="scope">
              <el-image style="width: 50px; height: 50px" :src="scope.row.bannerUrl" :zoom-rate="1.2" :max-scale="7"
                :min-scale="0.2" fit="cover" :preview-src-list="[scope.row.bannerUrl]" preview-teleported />
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" align="center">
            <template v-slot="scope">
              {{ scope.row.title || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="sortPower" label="排序" align="center">
            <template v-slot="scope">
              {{ scope.row.sortPower || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="createUser" label="创建人" align="center">
            <template v-slot="scope">
              {{ scope.row.createUser  || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
            <template v-slot="scope">
              {{ getDateTime(scope.row.createTime)[6] || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="Operations" label="操作" align="center">
            <template v-slot="scope">
              <div class="table-handle-box">
                <!-- <el-link style="font-size:14px" type="primary" @click="lookHanlde(1,scope.row)">编辑</el-link> -->
                <el-link style="font-size:14px;" type="danger" @click="lookHanlde(2,scope.row)">删除</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-footer">
          <div>
            <!-- <el-button :disabled="chooseList.length == 0" plain @click="handleClick">批量修改分组</el-button>
            <el-button :disabled="chooseList.length == 0" plain @click="lookHanlde(3,{})">批量删除</el-button> -->
          </div>
          <el-pagination v-model:currentPage="page" v-model:page-size="size" small :background="true"
            layout="total, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
  </div>
  <add-fenzu ref="addFenzuRef" @dialogClose="addFenzuClose" />
  <add-file ref="addFileRef" @dialogClose="addFileClose" />
  <edit-file ref="editFileRef" @dialogClose="editFileClose" />
  <confirm-pass ref="confirmPassRef" @verification="verification" />
  <change-fenzu ref="changeFenzuRef" @dialogClose="addFileClose" />
</template>

<script>
import { nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { getWindowWidthAndHeight, successDeal, warningDeal, bytesToSize, getDateTime } from '@/utils/utils'
import api from './api'
import addFenzu from './components/addFenzu.vue'
import addFile from './components/addFile.vue'
import editFile from './components/editFile.vue'
import confirmPass from '@/components/confirmPass.vue'
import changeFenzu from './components/changeFenzu.vue'
export default {
  components: {
    addFenzu,
    addFile,
    editFile,
    confirmPass,
    changeFenzu,
  },
  setup() {
    const addFenzuRef = ref(null)
    const treeRef = ref(null)
    const addFileRef = ref(null)
    const editFileRef = ref(null)
    const confirmPassRef = ref(null)
    const changeFenzuRef = ref(null)

    const state = reactive({
      chooseName: null,
      tableHeight: 0,
      tableHeight2: 0,
      page: 1,
      size: 9,
      total: 0,
      searchValue: null,
      treeData: [],
      defaultExpandedKeys: [],
      sucaiList: [],
      chooseList: [],
    })

    watch(() => state.searchValue, (newVal, oldVal) => {
      treeRef.value && treeRef.value.filter(newVal)
    })

    function uploadFile() {
      addFileRef.value.dialogShow({ parentType: state.defaultExpandedKeys[0] })
    }

    function getSucaiTree() {
      const obj = {

      }
      api.haibaoTypeList(obj).then(res => {
        if (res.code == '200') {
          state.treeData = res.data.list
          if (state.treeData.length) {
            nextTick(() => {
              const firstNode = document.querySelector('.el-tree-node')
              firstNode.click()
            })
          }
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function addFenzuHandle() {
      addFenzuRef.value.dialogShow()
    }

    function addFenzuClose() {
      getSucaiTree()
    }

    function editFileClose() {
      getSucai(state.defaultExpandedKeys[0])
    }

    function handleNodeClick(e) {
      state.defaultExpandedKeys = [e.id]
      state.chooseName = e.typeName
      state.page = 1
      getSucai(e.id)
    }

    function getSucai(typeId) {
      const obj = {
        typeId,
        page: state.page,
        size: state.size,
      }
      api.haibaoList(obj).then(res => {
        if (res.code == '200') {
          state.sucaiList = res.data.list
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    const filterNode = (value, data) => {
      if (!value) return true
      return data.typeName.includes(value)
    }

    function handleCommand(e, data) {
      switch (e) {
        case '1':
          //管理
          addFenzuRef.value.dialogShow({ ...data }, true)
          break
        case '2':
          //添加子分组
          const obj = {
            parentType: data.typeId,
          }
          addFenzuRef.value.dialogShow(obj, true)
          break
        case '3':
          //shanchu
          deleteFenzu(data.id)
          break
      }
    }

    function deleteFenzu(id) {
      const obj = {
        id,
      }
      api.haibaoTypeDelete(obj).then(res => {
        if (res.code == '200') {
          successDeal(res.msg)
          getSucaiTree()
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function handleCurrentChange(e) {
      state.page = e
      getSucai(state.defaultExpandedKeys[0])
    }

    function handleSizeChange(e) {
      state.size = e
      getSucai(state.defaultExpandedKeys[0])
    }

    //复制
    function copy(msg) {
      const input = document.createElement('input')
      input.style.opacity = 0
      input.value = msg
      input.setAttribute('readonly', 'readonly')
      document.body.appendChild(input)
      if (/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {
        input.setSelectionRange(0, 9999);
      } else {
        input.select()
      }
      document.execCommand('copy')
      document.body.removeChild(input)
      successDeal('链接已复制')
    }

    function lookHanlde(i, data) {
      let title = ''
      let msg = ''
      switch (i) {
        case 1:
          //编辑
          editFileRef.value.dialogShow(data)
          break
        case 2:
          //删除
          state.chooseList = [data.id]
          title = '删除提示'
          msg = '是否确定删除海报？'
          confirmPassRef.value.dialogShow(title, msg, false)
          break
        case 3:
          //批量删除
          title = '删除提示'
          msg = '是否确定删除海报？'
          confirmPassRef.value.dialogShow(title, msg, false)
          break
      }
    }

    function handleSelectionChange(e) {
      state.chooseList = []
      if (e) {
        e.map(item => {
          state.chooseList.push(item.id)
        })
      }
    }

    function handleClick() {
      changeFenzuRef.value.dialogShow(state.chooseList, state.defaultExpandedKeys[0])
    }

    function getFileIds() {

    }

    function verification() {
      console.log(state.chooseList, 11)
      const obj = {
        id: state.chooseList.join(',')
      }
      api.haibaoDelete(obj).then(res => {
        if (res.code == '200') {
          successDeal(res.msg)
          getSucai(state.defaultExpandedKeys[0])
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function addFileClose() {
      getSucai(state.defaultExpandedKeys[0])
    }

    onMounted(() => {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 260
      state.tableHeight2 = winHeight.windowHeight - 270
      getSucaiTree()
    })

    return {
      ...toRefs(state),
      addFenzuRef,
      treeRef,
      addFileRef,
      editFileRef,
      confirmPassRef,
      changeFenzuRef,
      getDateTime,
      uploadFile,
      addFenzuHandle,
      addFenzuClose,
      handleNodeClick,
      filterNode,
      handleCommand,
      handleCurrentChange,
      handleSizeChange,
      bytesToSize,
      copy,
      lookHanlde,
      editFileClose,
      verification,
      handleSelectionChange,
      addFileClose,
      handleClick,
    }
  }
}
</script>

<style lang="scss" scoped>
.mater-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-flow: column;
  .head-box {
    width: 100%;
    .title-box {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #cccccc;
      padding-bottom: 10px;
      .title {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  .content-box {
    flex-grow: 1;
    margin-top: 10px;
    display: flex;
    .content-tree {
      height: 100%;
      border: 1px solid #a5a5a5;
      border-top: none;
      flex-shrink: 0;
      .search-box {
        box-sizing: border-box;
        padding: 10px 20px;
        background-color: rgba($color: #0081ff, $alpha: 0.1);
      }
      .tree-content {
        box-sizing: border-box;
        padding: 10px;
      }
      .my-tree {
        overflow-y: auto;
      }
    }
    .table-box {
      flex-grow: 1;
      box-sizing: border-box;
      padding-left: 20px;
      .table-footer {
        display: flex;
        margin-top: 10px;
        justify-content: space-between;
      }
      .table-title {
        font-size: 16px;
        font-weight: bold;
        box-sizing: border-box;
        padding: 10px;
        display: flex;
        align-items: center;
        gap: 5px;
        > img {
          width: 20px;
        }
      }
    }
  }
}
.text-hid {
  display: flex;
  align-items: center;
  gap: 5px;
  > div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
  > img {
    cursor: pointer;
  }
}
.flcen {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-right: 10px;
}
:deep(.el-tree) {
  .el-tree-node__content {
    padding: 5px 0;
  }
}
</style>